<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
      <el-form-item label="工单标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入工单标题" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="项目名称" prop="projectId">
        <el-select v-model="queryParams.projectId" filterable placeholder="请选择项目名称">
          <el-option v-for="item in itemList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="工单类型" prop="type">
        <el-select v-model="queryParams.type" filterable placeholder="请选择工单类型">
          <el-option v-for="item in itemTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="工单编号" align="center" prop="number" />
      <el-table-column label="工单标题" align="center" prop="title" />
      <el-table-column label="工单类型" align="center" prop="type" min-width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.type == 1 ? 'danger' : ''">{{ scope.row.type == 2 ? '普通工单' : '加急工单' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="维修人员" align="center" prop="maintenanceUserNickName" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="创建人员" align="center" prop="createByNickName" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="工单状态" align="center">
        <template slot-scope="scope">
          <el-button :type="[3, 8, 9, 11, 12].includes(scope.row.status)
      ? 'danger'
      : [6, 7].includes(scope.row.status)
        ? 'success'
        : 'primary'
      " plain size="mini" @click="handleTrend(scope.row)">
            {{ getByStatus(scope.row.status) }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)">
            <!-- {{ [2, 6].includes(scope.row.status) ? "审核" : "详情" }} -->
            详情
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-chat-line-round" @click="handleComment(scope.row)">
            评论
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-paperclip" @click="handleFile(scope.row)"
            v-hasPermi="['org:workOrderAnnex:querye']">
            相关附件
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">
            撤销
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-dialog :title="examineForm.type == 2
      ? '审核通过'
      : examineForm.type == 3
        ? '退回工单'
        : examineForm.type == 5
          ? '指定处理人'
          : examineForm.type == 7
            ? '复验通过'
            : examineForm.type == 8
              ? '退回工单'
              : ''
      " :visible.sync="examineShow" width="500px" append-to-body @close="cancelExamine">
      <el-form ref="examineForm" :model="examineForm" label-width="100px">
        <el-form-item :label="examineForm.type == 3 ? '退回原因' : '备注信息'" prop="remark">
          <el-input v-model="examineForm.remark" type="textarea" :rows="3" :placeholder="`请输入${examineForm.type == 3 ? '请输入退回原因' : '备注信息'
      }`" />
        </el-form-item>
        <el-form-item v-if="examineForm.type == 2" label="通知人员" prop="informUserId">
          <el-select v-model="examineForm.informUserId" multiple filterable placeholder="请选择通知人员" style="width: 100%">
            <el-option v-for="item in informUserList" :key="item.id" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="[5, 8].includes(examineForm.type)" label="维修人员" prop="maintenanceUserId">
          <el-select v-model="examineForm.maintenanceUserId" filterable :disabled="examineForm.type == 8"
            placeholder="请选择维修人员" style="width: 100%">
            <el-option v-for="item in maintenanceList" :key="item.id" :label="item.userNickName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="examineForm.type == 3" label="退回至人员" prop="createByNickName">
          <el-input v-model="detailRow.createByNickName" disabled style="width: 100%" />
        </el-form-item>
        <el-form-item v-if="examineForm.type == 7" label="附件" prop="annexUrl">
          <ImageUpload v-model="examineForm.annexUrl" :limit="10" :isShowTip="false" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitExamine">确 定</el-button>
        <el-button @click="cancelExamine">取 消</el-button>
      </div>
    </el-dialog>
    <Order-detail-dialog v-model="detailShow" :row="detailRow" @command="handleCommand" @cancel="cancel" />
    <Order-step-dialog v-model="trendShow" :row="detailRow" @cancel="cancel" />
    <Order-comment-dialog v-model="commentShow" :row="detailRow" @cancel="cancel" />
    <OrderFileDialog v-model="fileShow" :row="detailRow" @cancel="cancel" />
  </div>
</template>

<script>
import {
  listOrder,
  getOrder,
  getOrderUserList,
  maintenanceUserList,
  addOrderRecord,
  projectList,
} from "@/api/system/order";
import OrderDetailDialog from "@/views/order/list/cp/OrderDetailDialog.vue";
import OrderStepDialog from "@/views/order/my/cp/OrderStepDialog";
import OrderCommentDialog from "@/views/order/my/cp/OrderCommentDialog.vue";
import OrderFileDialog from "@/views/order/my/cp/OrderFileDialog.vue";

export default {
  name: "Order",
  components: {
    OrderDetailDialog,
    OrderStepDialog,
    OrderCommentDialog,
    OrderFileDialog
  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      loading: true, // 遮罩层
      total: 0, // 总条数
      dataList: [], // 工单数据
      itemList: [], // 项目列表
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        projectId: null,
        type: null
      },
      statusList: [
        // 状态列表
        {
          label: "待负责人审批",
          value: 1
        },
        {
          label: "待业主审批",
          value: 2
        },
        {
          label: "被退回",
          value: 3
        },
        {
          label: "重新发起",
          value: 4
        },
        {
          label: "维修接单",
          value: 5
        },
        {
          label: "维修结束",
          value: 6
        },
        {
          label: "已完结",
          value: 7
        },
        {
          label: "复验不通过",
          value: 8
        },
        {
          label: "撤销工单",
          value: 9
        },
        {
          label: "任务发布",
          value: 10
        },
        // {
        //   label: "业主退回",
        //   value: 11
        // },
        // {
        //   label: "业主转回机构处理",
        //   value: 12
        // },
        // {
        //   label: "待二次复验",
        //   value: 13
        // },
        // {
        //   label: "二次复验不通过",
        //   value: 14
        // },
      ],
      detailShow: false, // 是否显示弹出层
      detailRow: {}, // 详情内容
      examineShow: false, // 详情审核弹窗
      examineForm: {
        workOrderId: "", // 工单id
        remark: "", // 备注信息
        type: "", // 审核类型
        annexUrl: [], // 附件
        informUserId: [], // 通知人员ID
        maintenanceUserId: null, // 维修人员
      },
      itemTypeList: [
        { label: "普通工单", value: 2 },
        { label: "加急工单", value: 1 },
      ],
      informUserList: [], // 通知人员列表
      maintenanceList: [], // 维修人员列表
      trendShow: false, // 操作记录弹窗
      commentShow: false, // 评论弹窗
      fileShow: false, // 相关附件弹窗
    };
  },
  created() {
    this.getList();
    this.getProjectList();
  },
  methods: {
    /** 查询维保工单列表 */
    getList() {
      this.loading = true;
      listOrder(this.queryParams)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 查询工单详情
    handleDetail(item) {
      getOrder(item.id).then((res) => {
        this.detailRow = res.data;
        this.detailShow = true;
      });
    },
    // 打开动态弹窗
    handleTrend(item) {
      this.detailRow = item;
      this.trendShow = true;
    },
    // 打开评论弹窗
    handleComment(item) {
      this.detailRow = item;
      this.commentShow = true;
    },
    // 打开附件弹窗
    handleFile(item) {
      this.detailRow = item;
      this.fileShow = true;
    },
    // 状态名称
    getByStatus(status) {
      let row = this.statusList.find((item) => item.value === status);
      return row ? row.label : "";
    },
    // 功能按钮操作
    handleCommand(item) {
      this.examineForm.type = item.type;
      this.examineForm.workOrderId = this.detailRow.id;
      this.detailShow = false;
      this.examineShow = true;
      if ([5, 8].includes(item.type)) {
        this.getmaintenanceList();
      }
      if (item.type == 8) {
        this.examineForm.maintenanceUserId = this.detailRow.maintenanceUserId;
      }
      if (item.type == 2) {
        this.getUserList();
      }
    },
    // 获取通知人员列表
    getUserList() {
      getOrderUserList(this.examineForm.workOrderId).then((res) => {
        if (res.code == 200) {
          this.informUserList = res.data;
        }
      });
    },
    // 获取维修人员列表
    getmaintenanceList() {
      maintenanceUserList().then((res) => {
        if (res.code == 200) {
          this.maintenanceList = res.data;
        }
      });
    },
    // 关闭弹窗
    cancel() {
      // this.detailRow = {};
    },
    // 关闭弹窗
    cancelExamine() {
      this.examineForm = {
        workOrderId: "", // 工单id
        remark: "", // 备注信息
        type: "", // 审核类型
        annexUrl: [], // 附件
        informUserId: [], // 通知人员ID
        maintenanceUserId: null, // 维修人员
      };
      this.detailRow = {};
      this.detailShow = false;
      this.examineShow = false;
    },
    // 确定审核
    submitExamine() {
      let data = Object.assign({}, this.examineForm);
      if (data.type == 5 && !data.maintenanceUserId) {
        this.$modal.msgError("请指定处理人");
        return;
      }
      data.informUserId = data.informUserId.join(",");
      data.annexUrl = data.annexUrl.join(",");
      addOrderRecord(data).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("审核成功");
          this.getList();
          this.cancelExamine();
        }
      });
    },
    // 获取项目列表
    getProjectList() {
      projectList().then((res) => {
        if (res.code == 200) {
          this.itemList = res.data;
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm('是否确认撤销维保工单编号为"' + row.number + '"的数据项？')
        .then(() => {
          addOrderRecord({
            workOrderId: row.id,
            type: 9,
          }).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("撤销成功");
              this.getList();
            }
          });
        })
        .catch(() => { });
    },
  },
};

</script>
<style lang="scss" scoped></style>
